<template>
  <div class="container">
    <div class="page__bd">
      <div class="weui-cells__title">微信资料</div>
      <div class="weui-cells weui-cells_after-title">
        <div class="weui-cell" style="height: 10vh;">
          <div class="weui-cell__bd" style="height: 10vh;align-items: center">
            <view style="margin-top: 4vh">头像</view>
          </div>
          <div class="weui-cell__ft" style="height: 10vh">
            <image :src="user.base.avatarUrl"
                   style="margin-right: 5px;vertical-align: middle;width:10vh; height: 10vh;"></image>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd">昵称</div>
          <div class="weui-cell__ft">{{user.base.nickName}}</div>
        </div>
      </div>
    </div>
    <div class="page__bd">
      <div class="weui-cells__title">个人资料</div>
      <div class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">姓名</div>
          <div class="weui-cell__ft weui-cell__ft_in-access"><input :placeholder="detail.name" maxlength="6"
                                                                    @change="inputName"/>
          </div>
        </view>
        <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">性别</div>
          <view @click="selectGender" class="weui-cell__ft weui-cell__ft_in-access">
            {{detail.gender}}
          </view>
        </view>
        <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">生日</div>
          <picker mode="date" :start="startDate" :end="endDate" @change="selectBirth"
                  class="weui-cell__ft weui-cell__ft_in-access">{{detail.birth}}
          </picker>
        </view>
        <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">身高</div>
          <picker @change="selectHeight" value="4" :range="heights" class="weui-cell__ft weui-cell__ft_in-access">
            {{detail.height}}
          </picker>
        </view>
        <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">体重</div>
          <picker @change="selectWeight" value="12" :range="weights" class="weui-cell__ft weui-cell__ft_in-access">
            {{detail.weight}}
          </picker>
        </view>
        <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">学历</div>
          <picker @change="selectEducation" :range="educations" class="weui-cell__ft weui-cell__ft_in-access">
            {{detail.education}}
          </picker>
        </view>
        <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">地址</div>
          <picker mode="region" :value="region" @change="selectCity" class="weui-cell__ft weui-cell__ft_in-access">
            {{detail.address}}
          </picker>
        </view>
        <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">手机号</div>
          <div class="weui-cell__ft weui-cell__ft_in-access"><input type="number" maxlength="11" @input="inputNumber"
                                                                    :placeholder="detail.mobile" v-model="number"
                                                                    @change="inputMobile"/>
          </div>
        </view>
      </div>
    </div>
    <button class="saveBtn" type="primary" @click="saveDetail">
      保存
    </button>
  </div>
</template>

<script>
  let endDate;
  let startDate;

  export default {
    name: "index",
    component: {},
    data() {
      return {
        test: {a: '1554'},
        detail: {
          name: '未完善',
          gender: '未完善',
          birth: '未完善',
          height: '未完善',
          weight: '未完善',
          education: '未完善',
          address: '未完善',
          mobile: '未完善'
        },
        genders: ["男", "女"],
        heights: ["190cm", "185cm", "180cm", "175cm", "170cm", "165cm", "160cm", "155cm", "150cm"],
        weights: ["200斤", "195斤", "190斤", "185斤", "180斤", "175斤", "170斤", "165斤", "160斤", "155斤", "150斤", "145斤", "140斤", "135斤", "130斤", "125斤", "120斤", "115斤", "110斤", "105斤", "100斤", "95斤", "90斤", "85斤", "80斤", "75斤", "70斤", "65斤"],
        educations: ["小学", "初中", "高中", "专科", "本科", "硕士", "博士"],
        region: ['山东省', '泰安市', '宁阳县'],
        number: ''
      }
    },
    computed: {
      user() {
        return this.$store.state.user
      }
    },
    methods: {
      authSetUser(e) {
        this.$store.commit('login', e.mp.detail.userInfo);
        wx.navigateBack();
      },
      inputName(e) {
        if (e.mp.detail.value.trim().length > 0) {
          this.detail.name = e.mp.detail.value;
        }
      },
      selectGender() {
        let _this = this;
        wx.showActionSheet({
          itemList: _this.genders,
          success: function (res) {
            _this.detail.gender = _this.genders[res.tapIndex];
            //_this.$forceUpdate();
          }
        });
      },
      selectBirth(e) {
        this.detail.birth = e.mp.detail.value;
      },
      selectHeight(e) {
        this.detail.height = this.heights[e.mp.detail.value];
      },
      selectWeight(e) {
        this.detail.weight = this.weights[e.mp.detail.value];
      },
      selectEducation(e) {
        this.detail.education = this.educations[e.mp.detail.value];
      }, selectCity(e) {
        this.detail.address = e.mp.detail.value;
      },
      inputMobile(e) {
        if (this.isPhoneNum(this.number)) {
          this.detail.mobile = this.number;
        } else {
          wx.showToast({
            title: '请输入正确的手机号',
            icon: 'none',
            duration: 1500
          });
        }
        this.number = '';
      }, inputNumber(e) {
        this.number = e.mp.detail.value.replace(/[^\d]/g, '');
      },
      isPhoneNum(str) {
        return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
      }, async saveDetail() {
        let props = Object.keys(this.detail);
        let propName;
        for (let i = 0; i < props.length; i++) {

          let prop = this.detail[props[i]];
          if (prop == "未完善") {
            switch (props[i]) {
              case 'name':
                propName = '姓名';
                break;
              case 'gender':
                propName = '性别';
                break;
              case 'birth':
                propName = '生日';
                break;
              case 'height':
                propName = '身高';
                break;
              case 'weight':
                propName = '体重';
                break;
              case 'education':
                propName = '学历';
                break;
              case 'address':
                propName = '地址';
                break;
              case 'mobile':
                propName = '手机号';
                break;
            }
            break;
          }
        }
        if (propName) {
          wx.showModal({
            title: '提示',
            content: '您的' + propName + '信息还没有完善',
            showCancel: false
          });
          return
        }

        wx.showLoading({
          title: '保存中'
        });
        let _this = this;
        wx.cloud.callFunction({
          name: 'updateUserDetail',
          data: {
            openid: this.user.openid,
            detail: _this.detail
          }, success: res => {
            wx.hideLoading();
            _this.$store.commit('updateDetailInfo', _this.detail);
            wx.showToast({
              title: '保存成功',
              icon: 'none',
              duration: 1500
            });
          }
        })
      }
    }, onShow() {
      wx.setNavigationBarTitle({title: '完善资料'});
      if (this.user.detail) {
        let props = Object.keys(this.user.detail);
        for (let i = 0; i < props.length; i++) {
          if (this.user.detail[props[i]]) {
            this.detail[props[i]] = this.user.detail[props[i]];
          }
        }
      }
      let now = new Date();
      endDate = this.$formatDate("yyyy-MM-dd", now);

      now.setFullYear(now.getFullYear() - 50);
      startDate = this.$formatDate("yyyy-MM-dd", now);
      console.log(startDate + "--" + endDate)


    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
    background-color: #F7F7F7;
    overflow: hidden;
    font-family: PingFang-SC;
  }

  .saveBtn {
    position: absolute;
    width: 98vw;
    left: 1vw;
    bottom: 1vw;
  }

  .weui-cell {
    height: 3vh;
  }
</style>
